<template>
  <div class="album-header">
    <h1 class="album-title">{{ album?.title }}</h1>
    <div class="album-meta">
      <span class="album-date">
        <i class="ri-calendar-line"></i>
        {{ formatDate(album?.date) }}
      </span>
      <span class="album-count">
        <i class="ri-image-line"></i>
        {{ album?.photos.length || 0 }}张照片
      </span>
    </div>
    <p class="album-desc">{{ album?.description }}</p>
  </div>
</template>

<script setup>
defineProps({
  album: {
    type: Object,
    default: null,
  },
})

// 格式化日期函数
const formatDate = (dateString) => {
  if (!dateString) return ''
  const date = new Date(dateString)
  return `${date.getFullYear()}.${String(date.getMonth() + 1).padStart(2, '0')}.${String(date.getDate()).padStart(2, '0')}`
}

defineOptions({ name: 'AlbumHeader' })
</script>

<style lang="scss" scoped>
// 相册标题
.album-header {
  margin-bottom: 2.5rem;

  .album-title {
    font-size: 2.25rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--text-color);
  }

  .album-meta {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    color: var(--text-color-secondary);
    margin-bottom: 1rem;

    i {
      margin-right: 0.375rem;
    }
  }

  .album-desc {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-color-secondary);
    max-width: 800px;
  }
}

// 响应式调整
@media (max-width: 768px) {
  .album-header {
    margin-bottom: 2rem;

    .album-title {
      font-size: 1.75rem;
    }
  }
}
</style>
